<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>

	<view class="flex bg-white">
		<!-- 分类 -->
		<view class="boxes-left mr-3 px-[25rpx] py-[25rpx]">
			<view :class="{ 'boxes-name2': active == index }" v-for="(item, index) in pageList" :key="index" class="boxes-name" @click="tabs(item.value, index)">
				{{ item.name }}
			</view>
		</view>
		<!-- 内容 -->
		<view class="boxes-right">
			<z-paging ref="paging" v-model="activityData" @query="queryList" :fixed="false" height="100%" use-page-scroll>
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in activityData" :key="item.id" btn-width="120">
					<view class="news-card flex bg-white px-[20rpx] py-[32rpx]" @click="detail(item)">
						<view class="mr-[20rpx]" v-if="item.logo">
							<u-image :src="item.logo" width="240" height="180"></u-image>
						</view>
						<view class="news-card-content flex flex-col justify-between flex-1">
							<view class="news-card-content-title text-base">{{ item.title }}</view>
							<view class="news-card-content-intro text-gray-400 text-sm mt-[16rpx]">
								{{ item.content }}
							</view>

							<view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
								<view>{{ item.address }}</view>
								<u-icon name="map" width="25" height="25" color="#5274EB"></u-icon>
							</view>
						</view>
					</view>
				</u-swipe-action>
			</z-paging>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowRef } from 'vue';
import { shanghutype, getShanghu } from '@/api/shop';
import { onLoad } from '@dcloudio/uni-app';

const paging = shallowRef();

const pageList: any = ref([]);
const type: any = ref('');
const active: any = ref(0);

const activityData: any = ref([]);


const queryList = async (page_no: number, page_size: number) => {
	if(!type.value){return}
	try {
		const { lists } = await getShanghu({
			type: type.value,
			city: uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):'341100',
			page_no,
			page_size
		});
		lists.forEach((item: any) => {
			item.show = false;
		});
		
		activityData.value.concat(lists);
		paging.value.complete(lists);
		// console.log(activityData.value)
		
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};

const detail = async (item) => {
	uni.navigateTo({
		url: '/pages/merchant/merchant_detail?item=' + encodeURIComponent(JSON.stringify(item))
	});
};

const tabs = async (id, index) => {
	active.value = index;
	type.value = id;
	paging.value.reload();	
};
const getData = async () => {
	pageList.value = await shanghutype();
	type.value = pageList.value[active.value].value;
	// #ifdef H5
	paging.value.reload();
	// #endif
};
onLoad((options: any) => {
	getData();
});
</script>

<style scoped>
page {
	background-color: #fff;
}
.boxes-left {
	width: 180rpx;
	white-space: nowrap;
	padding-top: 35rpx;
}

.boxes-name {
	font-size: 28rpx;
	margin-bottom: 60rpx;
	padding-left: 15rpx;
	border-left: 2px solid #fff;
}

.boxes-name2 {
	color: #2073f4;
	border-left: 2px solid #2073f4;
}
.boxes-right {
	flex: 1;
}

.boxes-card {
	border: 1px solid #eee;
	border-radius: 15rpx;
}
</style>